<template>
  <div class="register">
    <div class="register-content">
      <div class="register-info">
        <InfoForm :infoForm="registerData.form" ref="registerRef">
          <div class="register-user">
            <el-form-item prop="account" label="登录手机号:" :rules="{ required: true, validator: validatePhone, trigger: 'blur' }">
              <el-input class="third_input" v-model="registerData.form.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="captcha" label="短信验证码:" required>
              <div class="captcha">
                <el-input v-model="registerData.form.captcha" autocomplete="off"></el-input>
                <Button :label="num > 0 ? `${num}s` : '发送验证码'" class="captcha-btn" :disabled="num > 0" @click="onGetCodeClick" />
              </div>
            </el-form-item>
            <el-form-item prop="password" :show-message="false" label="设置密码:" :rules="{ required: true, validator: validatePassword, trigger: 'blur' }">
              <el-input type="password" class="third_input" placeholder="长度应为6-15个字符,必须包含大写、小写字母和数字" v-model="registerData.form.password" autocomplete="off" show-password></el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword" :show-message="false" label="确认密码:" :rules="{ required: true, validator: validateReplyPassword, trigger: 'blur' }">
              <el-input type="password" class="third_input" placeholder="再次输入密码" v-model="registerData.form.confirmPassword" autocomplete="off" show-password></el-input>
            </el-form-item>

            <div class="register-bottom">
              <div class="tips">
                <el-checkbox prop="checked" v-model="registerData.form.checked" required />
                <p>我已阅读并同意<span @click="() => onViewClick('clause')">《耶购网上医疗器械平台服务协议》</span>和<span @click="() => onViewClick('policy')">《耶购网上医疗器械平台隐私政策》</span></p>
              </div>

              <Button class="button" label="立即注册" @click="onSubmitClick" />
            </div>
          </div>
        </InfoForm>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, shallowRef } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import md5 from 'js-md5'
import api from '@/api'
import Button from '@/components/button/button.vue'
import InfoForm from './component/info.vue'

const router = useRouter()

const registerData = reactive({
  form: {
    checked: false
  }
})

const registerRef = shallowRef(null)
const num = ref(0)

const validatePhone = (rule, value, callback) => {
  const reg = /^1[3456789]\d{9}$/
  if (!value || !reg.test(value)) {
    callback(new Error())
  } else {
    callback()
  }
}

const validatePassword = (rule, value, callback) => {
  const reg = /^(?=.*[a-z].*)(?=.*[A-Z].*)(?=.*[0-9].*)[a-zA-Z0-9^%&*@#,;\=\?\!$]{6,15}$/
  if (!value || !reg.test(value)) {
    callback(new Error())
  } else {
    callback()
  }
}

const validateReplyPassword = (rule, value, callback) => {
  const reg = /^(?=.*[a-z].*)(?=.*[A-Z].*)(?=.*[0-9].*)[a-zA-Z0-9^%&*@#,;\=\?\!$]{6,15}$/
  if (!value || !reg.test(value)) {
    callback(new Error())
  } else if (value !== registerData.form.password) {
    callback(new Error())
  } else {
    callback()
  }
}

const register = async () => {
  let params = Object.assign({}, registerData.form)
  params.password = md5(registerData.form.password)

  params.supplierQualificationList = [
    {
      effectiveDate: params.businessCardStartDate,
      expiredDate: params.businessCardEndDate,
      qualificationImg: params.businessLicense,
      qualificationType: 'BUSINESS_LICENSE'
    },
    {
      effectiveDate: '',
      expiredDate: '',
      qualificationImg: params.internetCertificate,
      qualificationType: 'INTERNET_CERTIFICATE'
    }
  ]

  delete params.confirmPassword
  delete params.businessCardEndDate
  delete params.businessCardStartDate
  delete params.businessLicense
  delete params.internetCertificate

  let { err } = await api.post('/medinstrument/third/supplier/supplierRegister', params)
  if (err) {
    ElMessage.error(err)
  } else {
    ElMessage.success('注册成功，请等待后台审核')
  }
}

const send = async () => {
  let params = { mobile: registerData.form.account, smsType: 'REGISTER' }
  let { err } = await api.post('/medinstrument/third/sms/sendMessage', params)
  if (err) {
    ElMessage.error(err)
  } else {
    ElMessage.success('短信发送成功')
  }
}

const onSubmitClick = async () => {
  try {
    await registerRef.value.submit()
    if (registerData.form.checked === false) {
      ElMessage.error('请先阅读并同意《耶购器械网站用户使用条款》和《耶购隐私政策》')
      return
    }
    register()
  } catch (e) {}
}

const onGetCodeClick = () => {
  if (!registerData.form.account) {
    num.value = 0
    return
  } else {
    num.value = 60

    const timer = setInterval(() => {
      num.value--
      if (num.value === 0) {
        clearInterval(timer)
      }
    }, 1000)
    send()
  }
}

const onViewClick = (type) => {
  if (type === 'clause') {
    let { href } = router.resolve({ path: '/clause' })
    window.open(href, '_blank')
  } else {
    let { href } = router.resolve({ path: '/policy' })
    window.open(href, '_blank')
  }
}
</script>

<style scoped lang="less">
.register {
  .register-content {
    display: flex;
    align-items: center;
    justify-content: center;

    .register-info {
      margin-top: 60px;

      .register-user {
        margin-top: 60px;

        .third_input {
          width: 430px;
        }

        .captcha {
          width: 100%;
          display: flex;
          align-items: center;
          .el-input {
            height: 40px;
          }

          .captcha-btn {
            width: 140px;
            height: 40px;
            color: var(--color-primary);
            border-color: var(--color-primary);
            font-size: 14px;
            background-color: #fff;
            margin-left: 12px;
          }
        }

        .register-bottom {
          margin-left: 134px;
        }

        .tips {
          display: flex;
          align-items: center;
          color: var(--span-color-text);
          font-size: 12px;
          line-height: 16px;

          p {
            margin-left: 8px;
          }

          span {
            color: #027db4;
            cursor: pointer;
          }
        }

        .button {
          width: 86px;
          height: 34px;
          background: var(--color-primary);
          color: #fff;
          margin: 30px 0 40px 0;
          border: 0;
        }
      }
    }
  }
}
</style>
